<template>
  <div class="log">
    <EwgDialog ref="Dialog" @close="close" modal>
      <template v-slot:trigger>
        <i
          class="icon ewg-icon-gengxinrizhi"
          title="更新日志"
          @click="open"
        ></i>
      </template>
      <div class="log-dialog beautify-scroll">
        <div>
          更新日志
          <span class="close" @click="close">关闭</span>
        </div>
        <div v-for="(item, index) of content" :key="index">
          <span> {{ index + 1 }}： </span>{{ item }}
        </div>
      </div>
      <!-- 大地图 -->
    </EwgDialog>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
import { updateLog as content } from "../options";
export default {
  setup() {
    const Dialog = ref();
    const close = () => {
      Dialog.value.close();
    };
    const open = () => {
      Dialog.value.open();
    };
    return {
      Dialog,
      close,
      open,
      content
    };
  }
};
</script>
<style lang="scss" scoped>
.log {
  position: fixed;
  top: 330px;
  right: 20px;
  .icon {
    font-size: 30px;
    cursor: pointer;
    animation: opacityDong 3s infinite;
    color: $--color-white;
    text-shadow: 0 0 10px $--color-red;
  }
}
.log-dialog {
  width: 400px;
  height: 60%;
  border-radius: $--border-radius;
  border: 3px solid $--color-white;
  background: $--color-black-half-quarter;
  color: $--color-white;
  text-align: left;
  padding: 20px;
  overflow: auto;
  & > div {
    margin-bottom: 10px;
    line-height: 24px;
    & > span {
      display: inline-block;
      width: 40px;
      text-align: right;
    }
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
.close {
  cursor: pointer;
  float: right;
}
</style>
